<template>
    <div class="view-container">
      <b-table>
        <!--  搜索栏  -->
        <template #query>
          <query-form>
            <el-form :ref="options.queryForm.ref" :model="queryModel" :inline="true" label-position="left">
            </el-form>
  
            <template #footer>
              <el-button icon="RefreshLeft" @click="resetQuery" size="small" auto-insert-space>重置</el-button>
              <el-button type="primary" icon="Search" v-loading="loading.query" @click="handleQuery" size="small"
                auto-insert-space>
                搜索
              </el-button>
            </template>
          </query-form>
        </template>
  
        <!--  按钮栏  -->
        <template #toolbar>
          <toolbar :tableModel="tableModel" :options="options" @fetchTableData="fetchTableData"
            @pageNumChange="pageNumChange" @pageSizeChange="pageSizeChange" @saveColumnSetting="saveColumnSetting"
            @resetColumn="resetColumnSetting">
            <toolbar-item v-hasPerm="'system:dictType:insert'">
              <el-button @click="handleAdd" type="success" icon="Plus" size="small" plain auto-insert-space>
                新增
              </el-button>
            </toolbar-item>
  
            <toolbar-item v-hasPerm="'system:dictType:edit'">
              <el-button @click="handleEdit(tableModel.selectedRow[0])" :disabled="disabled.edit" type="primary"
                icon="Edit" size="small" plain auto-insert-space>
                编辑
              </el-button>
            </toolbar-item>
  
            <toolbar-item v-hasPerm="'system:dictType:export'">
              <export-excel @export-all="handleExport(true)" @export-current="handleExport(false)" />
            </toolbar-item>
  
            <toolbar-item v-hasPerm="'system:dictType:upload'">
              <upload-excel :show="upload.show" :limit="upload.limit" :headers="upload.headers" :action="upload.action"
                :strategy="upload.param" @handleFileUploadProgress="handleFileUploadProgress"
                @handleFileSuccess="handleFileSuccess" @closeUpload="closeUpload" @submitUpload="submitUpload"
                @handleUpload="handleUpload" />
            </toolbar-item>
  
            <toolbar-item v-hasPerm="'system:dictType:delete'">
              <el-button @click="handleDelete()" v-loading="loading.delete" :disabled="disabled.delete" type="danger"
                icon="Delete" size="small" plain auto-insert-space>
                删除
              </el-button>
            </toolbar-item>
          </toolbar>
        </template>
  
        <!--  表格栏  -->
        <el-table :ref="options.table.ref" v-loading="loading.table" :data="tableModel.data"
          :header-cell-class-name="handleHeaderCellClass" @sort-change="handleSortChange"
          @selection-change="handleSelectionChange" @current-change="clickTableRow" @row-dblclick="handleEdit"
          height="100%" width="100%" :cell-class-name="cellClassName" :size="tableModel.size" :stripe="tableModel.stripe"
          :border="tableModel.border">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column v-if="tableModel.index" type="index" label="行号" width="70" align="center" fixed />
  
          <template v-for="(item, index) in tableModel.columns" :key="index">
            <el-table-column v-if="item.show" :column-key="item.prop" :prop="item.prop" :width="item.width"
              :sortable="item.sortable" :fixed="item.fixed" :label="item.label" :formatter="item.formatter"
              :show-overflow-tooltip="item.showOverflowTooltip" align="center" />
          </template>
        </el-table>
  
        <!--  编辑框  -->
        <el-dialog v-model="editForm.show" :title="editForm.title" :close-on-click-modal="false" @close="handleClose"
          center append-to-body draggable>
          <el-form :ref="options.editForm.ref" :model="editForm.data" :rules="rules" label-width="100px">
            <el-form-item label="主键ID" prop="id">
              <el-input v-model="editForm.data.id" placeholder="请输入主键ID"/>
            </el-form-item>
            <el-form-item label="字典类型标签" prop="typeLabel">
              <el-input v-model="editForm.data.typeLabel" placeholder="请输入字典类型标签"/>
            </el-form-item>
            <el-form-item label="字典类型" prop="typeValue">
              <el-input v-model="editForm.data.typeValue" placeholder="请输入字典类型"/>
            </el-form-item>
            <el-form-item label="字典类型状态: 0-停用 1-正常" prop="state">
              <el-input v-model="editForm.data.state" placeholder="请输入字典类型状态: 0-停用 1-正常"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="editForm.data.remark" placeholder="请输入备注"/>
            </el-form-item>
          </el-form>
  
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="handleSubmit" auto-insert-space>确定</el-button>
              <el-button @click="handleClose" auto-insert-space>取消</el-button>
            </div>
          </template>
        </el-dialog>
      </b-table>
    </div>
  </template>
  
  <script setup name="DictType">
  import {
    list,
    listExcelHeader,
    add,
    update,
    exportData,
    deleteData
  } from '@/api/system/dictType'
  import useCrud from '@/hook/useCrud'
  
  const { proxy } = getCurrentInstance()
  
  const options = {
    model: {
      idProp: 'id',
      tipsProp: 'name',
    },
    view: {
      refreshView: () => {
        fetchTableData()
      }
    },
    queryForm: {
      ref: 'queryFormRef',
      params: {}
    },
    table: {
      ref: 'tableRef',
      columnSettingRef: 'columnSettingRef',
      columnStoreKey: 'dictType',
      pageSizes: [100, 200, 500, 1000]
    },
    editForm: { ref: 'editFormRef', },
    action: {
      query: { api: list },
      delete: { api: deleteData },
      download: { api: exportData },
      upload: { api: undefined, fetchHeaderApi: listExcelHeader },
      add: { api: add },
      edit: { api: update },
    }
  }
  const {
    queryModel,
    tableModel,
    upload,
    loading,
    disabled,
    resetColumnSetting,
    saveColumnSetting,
    handleSelectionChange,
    handleHeaderCellClass,
    handleSortChange,
    handleQuery,
    resetQuery,
    fetchTableData,
    pageNumChange,
    pageSizeChange,
    clickTableRow,
    handleDelete,
    handleExport,
    handleUpload,
    closeUpload,
    handleFileUploadProgress,
    handleFileSuccess,
    submitUpload,
  
    editForm,
    handleAdd,
    handleEdit,
    handleSubmit,
    handleClose
  } = useCrud(proxy, options)
  
  const rules = {}
  
  function cellClassName(val) {
    // console.log(val)
  }
  
  options.view.refreshView()
  </script>
  <style scoped lang="scss">
  .view-container {
    display: flex;
    height: 100%;
  }
  </style>
  